<template>
    <div>
        <!-- <h1>{{ name }}</h1>
        <h2>{{ counter }}</h2>
        <h2>counter*2:{{ DoubleCounter }}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button> -->

        <h2>{{ state.counter }}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>

<script>
import { reactive } from 'vue'
export default {
    // data() {    //setup的优先级更高,data中的counter被setup返回的counter值覆盖了
    //     return {
    //         counter: 0
    //     }
    // },
    // methods: {
    //     increment() {
    //         this.counter++
    //     },
    //     decrement() {
    //         this.counter--
    //     }
    // },
    // computed: {
    //     DoubleCounter() {
    //         return this.counter * 2
    //     }
    // },
    // setup返回值
    /* 作用:
    *
    1.    setup返回值可以在template模板中使用
    也就是我们可以通过setup的返回值来替代data选项
    2.  也可以返回一个执行函数来代替methods中定义的方法
    3.注意:在setup函数中定义的变量,Vue并不会跟踪它的变化,来引起界面的响应式操作
    */
    // setup() {
    //     const name = "codewhy"
    //     let counter = 100
    //     const increment = ()=>{counter++}
    //     const decrement = ()=>{counter--}
    //     return {   
    //         name,
    //         counter,
    //         increment,
    //         decrement
    //     }
    // }
    // 让setup返回值具有响应式
    /**
     * 这是因为当我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集；
     * 当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作（比如更新界面）；
     * 事实上，我们编写的data选项，也是在内部交给了reactive函数将其编程响应式对象的；
     */
    setup() {
        const state = reactive({    //REACTIVE是为了将其中的对象放入proxy对象中,进行依赖监听
            counter: 100
        })
        // 局部函数
        const increment = () => {
            state.counter++;
        }
        const decrement = () => {
            state.counter--;
        }
        return {   
            state,
            increment,
            decrement,
        }
    }
}
</script>

<style lang="scss" scoped>
</style>